<template>
  <div class="register">
    <!-- 头部 -->
    <van-nav-bar
      title="网易严选"
      style="font-size: 20px"
      left-text=""
      :left-arrow="false"
    >
      <template #left>
        <van-icon @click="home" name="wap-home-o" size="30" color="#dee1e6" />
      </template>
      <template #right>
        <van-icon
          @click="search"
          name="search"
          size="30"
          color="#dee1e6"
          style="margin-right: '7px'"
        />
        <van-icon
          @click="cart"
          name="shopping-cart-o"
          size="30"
          color="#dee1e6"
        />
      </template>
    </van-nav-bar>

    <!--logo  -->
    <van-image
      width="5rem"
      height="2.5rem"
      fit="contain"
      style="margin-left: 90px"
      src="https://yanxuan.nosdn.127.net/39c5e4583753d4c3cb868a64c2c109ea.png"
    />
    <!-- 输入手机号 -->
    <van-form>
      <van-field v-model="phone" placeholder="请填输入手机号" />

      <van-field
        type="password"
        center
        v-model="password"
        clearable
        placeholder="请输入密码"
      >
        <!-- <template #button>
          <van-button size="small" type="default">发送验证码</van-button>
        </template> -->
      </van-field>
    </van-form>

    <!--  -->
    <van-cell-group>
      <van-cell
        style="font-size: 14.28px; color: #969799; border: none"
        title="忘记密码 ？"
        value="注册账号"
      />
    </van-cell-group>

    <!--登录  -->
    <div style="margin: 16px" @click="login()">
      <van-button color="#ee0a24" type="primary" size="large">登录</van-button>
    </div>

    <!-- 协议 -->
    <van-checkbox
      v-model="checked"
      style="display: flex; font-size: 10px; margin-left: 16px"
      icon-size="12px"
      :border="false"
      shape="square"
      name="1"
    >
      <span style="color: #969799">我同意</span>
      <a style="color: #007aff">《服务条款》</a>
      <span style="color: #969799">和</span>
      <a style="color: #007aff">《网易隐私政策》</a>
    </van-checkbox>

    <!--其他登录方式  -->
    <div class="other">
      <div>其他登录方式</div>
      <van-icon name="arrow" size="14" color="#dee1e6" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      checked: false, //选中状态
      phone: "13243257893",
      password: "111111",
    };
  },
  methods: {
    async login() {
      if (!this.checked) {
        alert("请勾选协议");
        return;
      }
      let { phone, password } = this;
      try {
        await this.$store.dispatch("userLogin", { phone, password });
        alert("登录成功");
        console.log(111);
        this.$router.push("/");
      } catch (error) {
        alert("登录失败" + error.message);
      }
    },
    home() {
      this.$router.push("/home");
    },
    cart() {
      this.$router.push("/cart");
    },
    search() {
      this.$router.push({
        path: "/search",
        query: {
          redirect: "/login",
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.register {
  height: 100%;
  .other {
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-top: 20px;
  }
}
</style>
